<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.传统方式注册事件
        /* window.onload = function() { //当页面内容全部加载完毕再执行 (以至于放在head中也是可以的)  传统方法使用
                    var btn = document.querySelector('button');
                    btn.addEventListener('click', function() {
                        alert('点击我');
                    })
                }
                window.onload = function() { //当有多个传统注册事件 则以最后一个为准(就执行最后一个)
                    alert(11);
                } */
        //2.事件监听方式注册事件
        window.addEventListener('load', function() { //没有冲突,都可以执行出来
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {
                alert(2);
            })
            //-----------
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
            //load 等页面内容全部加载完毕,包含页面dom元素 图片 flash css 等等
            //DOMContentLoaded 是DOM加载完毕, 不包含图片 flash css 等就可以执行 加载速度比 load更快
    </script>
</head>

<body>
    <button>点击</button>

</body>

</html>